/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import Kdemo from "../component/Kdemo";
import { DatePicker, List, Toast, Modal } from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';

import './style/newDeal.css';
const tabList = ["名称/代码", "成本/现价", "持仓/可卖", '盈亏比例']
const tabList2 = ["名称/代码", "成本/现价", "持仓/可卖", '状态']
const tabList1 = ["当日成交", "当日委托", "历史成交", '历史委托']
const tabs = ["交易", "持仓", "查询"]
const alert = Modal.alert;
const now = new Date(Date.now());
console.log(now.getTime(), "lllll")
//时间选择
class Timestamp extends React.Component {
    state = {
        date: now,
        time: now,
    }
    change(date) {
        this.setState({
            date: date
        });
        // this.props.setStartDate(date.toLocaleDateString());
    }
    render() {
        return (
            <List className="date-picker-list timestamp" >
                <DatePicker
                    mode="date"
                    extra="Optional"
                    value={this.state.date}
                    onChange={date => this.change(date)}
                >
                    <List.Item arrow="horizontal"></List.Item>
                </DatePicker>

            </List>
        );
    }
}
class newDetal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            tabIndex2: 0,
            showType1: false,
            showindex1: -1,
            showindex2: -1,
            showindex3: -1,
            showType3: false,
            showType2: false,
            type: true,
            date1: null,
            date: now,
            date2: null,
            tabIndex3: 0,
            dateType: false,
            list: [
                { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
                { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
            ]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }

    componentDidMount() {
        this.setState({
        })
    }
    //tab切换
    jumpTab(index) {
        var list = [
            { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
            { time: '2020-4-23 12:12:23', type: '本金收入', money: "＋500.00", balance: "￥50000.00", state: 1 },
            { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
            { time: '2020-4-23 12:12:23', type: '保证金冻结', money: "500.00", balance: "￥50000.00", state: 2 },
            { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
            { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
            { time: '2020-4-23 12:12:23', type: '保证金扣除', money: "-500.00", balance: "￥50000.00", state: 3 },
        ]
        var arr;
        if (index === 1) {
            arr = list.filter(item => item.state === 1)
        }
        if (index === 2) {
            arr = list.filter(item => item.state === 3)
        }
        if (index === 0) {
            arr = list
        }
        this.setState({
            tabIndex: index,
            list: arr
        })
    }

    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    //title2点击
    tabList(index) {
        this.setState({
            tabIndex2: index
        })
    }
    jumpRule() {
        this.props.history.push({ pathname: "/guize" });
    }
    jumpAlert(item) {
        Toast.info(item, 2)
    }
    jumpTab1(index) {
        this.setState({
            tabIndex3: index
        })
    }
    cancle(index) {
        if (index === 0) {
            alert('提示', '是否选择撤单？', [
                { text: '取消', onPress: () => console.log('cancel') },
                { text: '确定', onPress: () => console.log('ok') },
            ])
        }
    }
    render() {
        const { tabIndex2, tabIndex } = this.state
        return (
            <div className='newDetal'>
                <div className='navtor'>
                    <div className='backDiv' onClick={() => this.goBack()}> <img alt='' src={require('./img/left.png')}></img></div>
                    <div className='tabs'>
                        <div className='titleList'>
                            {
                                tabs.map((item, index) => {
                                    return <div onClick={() => this.jumpTab(index)} key={index} className={tabIndex === index ? "titleTrue" : 'titleItem'} >{item}</div>
                                })
                            }
                        </div>
                    </div>
                    <div className='rules' onClick={() => this.jumpRule()}> 规则</div>
                </div>
                <div className='scroll'>

                    <div className='content'>

                        {
                            tabIndex === 0 ? this.renderTab0() : tabIndex === 1 ? this.renderTab1() : this.renderTab2()
                        }

                    </div>
                </div>
            </div >
        )
    }
    renderAll() {
        const { list } = this.state
        return <div>
            <div className="tab">
                {
                    tabList.map((item, index) => {
                        return <div key={index} className="tabItem" style={{ color: '#999' }}>{item}</div>
                    })
                }
            </div>
            {

                list.map((item, index) => {
                    return <div className="listItem" key={index} onClick={() => this.jumpListItem(index)}>
                        <div className="flex align-center">
                            <div className="tabItem">
                                <div>浦发银行6000</div>
                                <div>3-28 12:23:23</div>
                            </div>
                            <div className="tabItem" style={{ color: "#28D1A7" }} >
                                <div>10.39</div>
                                <div>10.32</div>
                            </div>
                            <div className="tabItem">
                                <div>1011</div>
                                <div>00</div>
                            </div>
                            <div className="tabItem" style={{ color: "#28D1A7" }} >
                                <div>-10.43</div>
                                <div>-10.4311111</div>
                            </div>
                        </div>
                    </div>
                })
            }
        </div>
    }
    renderTab0() {
        const { tabIndex2 } = this.state
        return <div>
            <div className="tab" style={{ paddingBottom: 0 }}>
                {
                    ["五档信息", "分时线", "日K线"].map((item, index) => {
                        return <div key={index} className="tabItem" onClick={() => this.tabList(index)} style={{ color: tabIndex2 === index ? "#333333" : '#999' }}>
                            <div style={{ paddingBottom: '1rem' }}>{item}</div>
                            {
                                index === tabIndex2 ? <div className="titleIconTrue"></div> : <div className="titleIconFalse"></div>
                            }
                        </div>
                    })
                }
            </div>
            {
                tabIndex2 === 0 ? <div>
                    {this.renderTop()}
                    {this.renderAll()}

                </div> : <div>< Kdemo></Kdemo> {this.renderAll()}</div>
            }

        </div>
    }
    renderTab1() {
        return <div>

            <div className="renderTab1Div">
                <div className="renderTab1">
                    <div className="renderTab1Flex">
                        <div className="renderTab1FlexItem">
                            <div className="renderTab1FlexItemName">
                                融资金额
                        </div>
                            <div className="renderTab1FlexItemMoney ">
                                348232.00元
                        </div>
                        </div>
                        <div className="renderTab1FlexItem">
                            <div className="renderTab1FlexItemName">
                                保证金
                        </div>
                            <div className="renderTab1FlexItemMoney ">
                                232423.00元
                        </div>
                        </div>
                        <div className="renderTab1FlexItem">
                            <div className="renderTab1FlexItemName">
                                现有市值
                        </div>
                            <div className="renderTab1FlexItemMoney " style={{ color: '#FC5656' }}>
                                348232.00元
                        </div>
                        </div>
                    </div>
                    <div className="renderTab1Flex">
                        <div className="renderTab1FlexItem">
                            <div className="renderTab1FlexItemName">
                                融资余额
                        </div>
                            <div className="renderTab1FlexItemMoney " style={{ marginBottom: 0 }}>
                                348232.00元
                        </div>
                        </div>
                        <div className="renderTab1FlexItem">
                            <div className="renderTab1FlexItemName">
                                递延管理费
                        </div>
                            <div className="renderTab1FlexItemMoney " style={{ marginBottom: 0 }}>
                                232423.00元
                        </div>
                        </div>
                        <div className="renderTab1FlexItem">
                            <div className="renderTab1FlexItemName">
                                当前盈余
                        </div>
                            <div className="renderTab1FlexItemMoney " style={{ color: '#FC5656', marginBottom: 0 }}>
                                348232.00元
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            {this.renderAll()}
        </div>
    }
    change(date) {
        if (date <= new Date()) {
            Toast.fail("起始日期必须为次日开始");
        } else {
            this.setState({
                date: date
            });
            this.props.setStartDate(date.toLocaleDateString());
        }
    }
    renderTab2() {
        const { tabIndex3, date1, date2, date, dateType, list } = this.state
        var arr = (tabIndex3 === 1 || tabIndex3 === 3) ? tabList2 : tabList
        return <div>
            <div className="renderTab1Div">
                <div className="renderTab1" style={{ padding: 0 }}>
                    <div className="tab" style={{ paddingBottom: 0 }}>
                        {
                            tabList1.map((item, index) => {
                                return <div key={index} className="tabItem" onClick={() => this.jumpTab1(index)} >
                                    <div style={{ paddingBottom: '1rem', color: tabIndex3 === index ? "#333333" : '#999', fontWeight: tabIndex3 === index ? "blod" : 'normal' }}>{item}</div>
                                    {
                                        index === tabIndex3 ? <div className="titleIconTrue"></div> : <div className="titleIconFalse"></div>
                                    }
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
            <div className="newData">
                <span>日期</span>
                <div className="newtimeRight">
                    <div className="bor">
                        <Timestamp setStartDate={(date) => this.props.setStartDate(date)} />
                        {/* </DatePicker> */}
                    </div>
                    <div style={{ margin: "0 5px" }}>—</div>
                    <div className="bor">
                        <Timestamp setStartDate={(date) => this.props.setStartDate(date)} />
                    </div>
                </div>
            </div>
            <div className="tab">
                {
                    arr.map((item, index) => {
                        return <div key={index} className="tabItem" style={{ color: '#999' }}>{item}</div>
                    })
                }
            </div>
            {

                [1, 2, 3, 4].map((item, index) => {
                    return <div className="listItem" key={index} onClick={() => this.jumpListItem(index)}>
                        <div className="flex align-center">
                            <div className="tabItem">
                                <div>浦发银行6000</div>
                                <div>3-28 12:23:23</div>
                            </div>
                            <div className="tabItem" style={{ color: "#28D1A7" }} >
                                <div>10.39</div>
                                <div>10.32</div>
                            </div>
                            <div className="tabItem">
                                <div>1011</div>
                                <div>00</div>
                            </div>
                            {
                                (tabIndex3 === 1 || tabIndex3 === 3) ? <div className="tabItem"  >
                                    <div style={{ color: index > 1 ? '#28D1A7' : '#FC5656' }}>{index === 0 ? '已报买' : index === 1 ? '已报单' : '已报卖'}</div>
                                    <div onClick={() => { this.cancle(index) }} style={{ color: index > 2 ? '#CCCCCC' : '#F98743' }}>{index === 0 ? '点击撤单' : index === 1 ? '已成交' : '已撤单'}</div>
                                </div> : <div className="tabItem" style={{ color: "#28D1A7" }} >
                                        <div>-10.43</div>
                                        <div>-10.4311111</div>
                                    </div>
                            }


                        </div>
                    </div>
                })
            }
        </div>
    }
    renderTop() {
        const { showType1, showindex1, showindex2, showindex3, showType3, showType2 } = this.state
        return <div className="topMain">
            <div className="topLeft">
                <div className="top1">
                    <div className="title">
                        <span className="name">00857 中国石油股份</span>
                        <span className="name1">(港股)[T+0]</span>
                    </div>
                    <div className="title2">
                        <span className="name3">当前价：</span>
                        <span className="name4" >2.740＋0.05＋1.085%</span>
                    </div>
                </div>
                <div className="top2 ">
                    <div className="flex" style={{ justifyContent: "space-between" }}>
                        <div className="juCenter1 flex flex-1  align-center">
                            <span className="jiage11">价格</span>
                            <div className="left11 jiage111">
                                <span className="leftClose" onClick={() => this.jumpAlert("老板自己减")}>-</span>
                                <span className="leftNum">2.73</span>
                                <span className="leftAdd" onClick={() => this.jumpAlert("老板自己加")}>+</span>
                            </div>
                        </div>
                        <div className="juCenter flex flex-1 align-center">
                            <span className="jiage11 jiage111">融资</span>
                            <div className="right11 flex align-center" onClick={() => { this.setState({ showType1: !showType1, showType2: false, showType3: false }) }}>
                                <span className="leftNum1">10倍</span>
                                {
                                    !showType1 ? <img className="imgIcon11" src={require('./img/help/icon2.png')} /> : <img className="imgIcon11" src={require('./img/help/icon1.png')} />
                                }

                            </div>
                        </div>
                    </div>
                    <div className="flex">
                        <div className="flex-1 text11 juCenter" style={{ textAlign: "left" }}>涨:2.96 跌:2.960</div>
                        <div className="flex-1 text11 juCenter" style={{ textAlign: "right" }}>融资费:10元/万*2天</div>
                    </div>
                    {
                        showType1 ? <div className="tabNum">
                            {
                                [1, 2, 3, 3, 1, 2, 1, 4, 5, 3].map(item => {
                                    return <div className="numItem" onClick={() => this.jumpAlert(item)}>{item}</div>
                                })
                            }
                        </div> : null
                    }

                </div>
                <div className="top2">
                    <div className="flex" style={{ justifyContent: "space-between" }}>
                        <div className="juCenter1 flex flex-1 align-center">
                            <span className="jiage11">保证金</span>
                            <div className="right11 jiage111 flex align-center" onClick={() => { this.setState({ showType2: !showType2, showType1: false, showType3: false }) }}>
                                <span className="leftNum1">1000</span>
                                {
                                    !showType2 ? <img className="imgIcon11" src={require('./img/help/icon2.png')} /> : <img className="imgIcon11" src={require('./img/help/icon1.png')} />
                                }
                            </div>
                        </div>
                        <div className="juCenter flex flex-1 align-center">
                            <span className="jiage11 jiage111">数量</span>
                            <div className="right11 flex align-center" onClick={() => { this.setState({ showType3: !showType3, showType2: false, showType1: false }) }}>
                                <span className="leftNum1">100</span>
                                {
                                    !showType3 ? <img className="imgIcon11" src={require('./img/help/icon2.png')} /> : <img className="imgIcon11" src={require('./img/help/icon1.png')} />
                                }
                            </div>
                        </div>
                    </div>
                    <div className="flex">
                        <div className="flex-1 text11 juCenter" style={{ textAlign: "left" }}>可用余额:232312</div>
                        <div className="flex-1 text11 juCenter" style={{ textAlign: "right" }}>满仓数量:12345股</div>
                    </div>
                    {
                        showType2 ? <div className="tabNum">
                            {
                                [1000, 2000, 5000, 10000, 20000, 30000, 50000, 100000].map(item => {
                                    return <div className="numItem1" onClick={() => this.jumpAlert(item)}>{item}</div>
                                })
                            }

                        </div> : null
                    }
                    {
                        showType3 ? <div className="tabNum">
                            {
                                ['全部可买：50000股', '全部可卖：50000股', '半仓可买：50000股', '半仓可卖：50000股', '1/4仓可买：50000股', '1/4仓可卖：50000股'].map(item => {
                                    return <div className="numItem2 ellipsis" onClick={() => this.jumpAlert(item)}>{item}</div>
                                })
                            }
                        </div> : null
                    }
                </div>
                <div className="top2 flex" style={{ marginBottom: 0 }}>
                    <div className="left4" style={{ marginRight: "0.2rem" }} onClick={() => this.jumpAlert("买入")}>
                        <div className="leftBtn1">买入</div>
                        <div className="leftTexta">止盈金额:232312</div>
                    </div>
                    <div className="left4" style={{ marginLeft: "0.2rem" }} onClick={() => this.jumpAlert("卖出")}>
                        <img className="iconBtn2" src={require('./img/iconBtn2.png')} />
                        <div className="leftTexta">止损金额:23212</div>
                    </div>
                </div>
            </div>
            <div className="topRight">
                {
                    [1, 2, 3, 1, 4].map((item, index) => {
                        return <div>
                            <div className="rightFlex">
                                <div>卖{index + 1}</div>
                                <div style={{ color: index > 1 ? "#28D1A7" : "#FC5656" }}>5.07</div>
                                <div>199</div>
                            </div>
                        </div>
                    })
                }
                <div className="margTop">
                    {
                        [1, 2, 3, 1, 4].map((item, index) => {
                            return <div>
                                <div className="rightFlex">
                                    <div>卖{index + 1}</div>
                                    <div style={{ color: index > 1 ? "#28D1A7" : "#FC5656" }}>5.07</div>
                                    <div>199</div>
                                </div>
                            </div>
                        })
                    }
                </div>

            </div>
        </div>
    }
}

export default newDetal;